<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:;"><img src="../assets/img/logo01.png"></a>
        <a class="site-navbar__brand-mini" href="javascript:;"><img src="../assets/img/logo02.png"></a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      <el-menu
        class="site-navbar__menu"
        mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>
      </el-menu>
     <ul class="nav-header">
       <li  :class="{'nav-active':(classVar=='tm01')}" @click="changeTopMenu('tm01')">首页</li>
       <!--<li :class="{'nav-active':(classVar=='tm02')}" @click="changeTopMenu('tm02')">编印</li>
       <li :class="{'nav-active':(classVar=='tm03')}" @click="changeTopMenu('tm03')">发行</li>
       <li :class="{'nav-active':(classVar=='tm04')}" @click="changeTopMenu('tm04')">合同</li>
       <li :class="{'nav-active':(classVar=='tm05')}" @click="changeTopMenu('tm05')">系统</li>-->
       <!--<li  v-for="item in menuListMain" :class="{'nav-active':(classVar==item.menuId)}" @click="changeTopMenu(item.menuId,item)">{{item.name}}</li>-->
       <template v-for="item in menuListMain">
        <li :key="item.menuId" v-if="item.menuId!=312"  :class="{'nav-active':(classVar==item.menuId),'disabled-color':(item.priceReq!=='1')}" @click="item.priceReq==='1'?changeTopMenu(item.menuId,item):''">{{item.name}}</li>
        <li :key="item.menuId" v-if="item.menuId == 312" @click="getIframeSrc">数字大屏</li>
       </template>
      
<!--       <li v-if="menuListMain.length>0" @click="downloadHelp">帮助文档</li>-->
     </ul>  
      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal"> 
        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img src="~@/assets/img/avatar2.png" :alt="userName">{{ userName }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="Mesnotify()">消息通知</el-dropdown-item>
              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="downloadExcel()">下载任务</el-dropdown-item>
<!--              <el-dropdown-item @click.native="downloadHelp()">帮助文档</el-dropdown-item>-->
              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
      <div class=" fother-user"  v-if="toggleList.length > 0">
        <div class="active-second-user" @click="toggleSecondUser" v-if="toggleList.length == 1">
              <span style="margin-right: 5px;" > {{ activeSecondUser.nameRelation }}  </span>
              <span>{{activeSecondUser.dclrw}}</span>
           </div> 
        <el-dropdown :show-timeout="0" placement="bottom" @command="commandClick" v-else> 
           <div class="active-second-user" @click="toggleSecondUser">
              <span style="margin-right: 5px;" > {{ activeSecondUser.nameRelation }}  </span>
              <span>{{activeSecondUser.dclrw}}</span>
           </div> 
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item v-for="item in toggleList"  :key="item.userIdRelation" :command="item" >{{ item.nameRelation }}</el-dropdown-item> 
            </el-dropdown-menu>
          </el-dropdown> 
      </div> 
      <!--<div style="display: inline-block; float: right; line-height: 50px; color: hsla(0,0%,100%,.67); margin-right: 10px; cursor: pointer" @click="download">帮助文档 <i class="el-icon-question"></i></div>-->
      <!--<a style="color: white;" id="download"></a>-->
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
    <excelfile v-if="excelfileVisible" ref="excelfile"></excelfile>
  </nav>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCommonStore } from '@/stores/common'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const commonStore = useCommonStore()
const userStore = useUserStore()
const { sidebarFold, topMenu } = storeToRefs(commonStore)
const { name: userName } = storeToRefs(userStore)

const props = defineProps({
  menuListMain: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['refresh'])

const changeTopMenu = (menuId, item) => {
  commonStore.updateTopMenu(menuId)
  commonStore.updateCurrentMainMenu(item)
  emit('refresh')
}

const getIframeSrc = () => {
  commonStore.getIframeSrc()
}
</script>
<style>
  .nav-header{
    display: inline-block;
    margin: 0;
    padding: 0 0 0 20px;
  }
  .nav-header li{
    display: inline-block;
    list-style: none;
    line-height: 50px;
    padding: 0 30px;
    cursor: pointer;
    color: hsla(0,0%,100%,.67);
  }
  .nav-header li a{
    color: hsla(0,0%,100%,.67);
  }

  .nav-header li:hover,.nav-header li a:hover{
    color: #fff;
  }
  .nav-header li.nav-active{
    background: #1463a8;
    color: #fff;
  }
  .nav-header li.disabled-color{
    color: #999;
    cursor: initial;
  }
  .nav-header li.nav-active a{
    color: #fff;
    text-decoration: none;
  }
  .site-navbar__brand{
    text-align: left!important;
  }
  .site-navbar__brand-lg{
    padding: 0 0 0 20px!important;
  }
  .site-navbar__body{
    background: #115699!important;
    min-width: 1100px;
  }
  @media screen and (max-width: 1450px){
    .nav-header li{
      padding: 0 23px;
    }
  }
  @media screen and (max-width: 1325px){
    .nav-header li{
      padding: 0 18px;
    }
  }
  @media screen and (max-width: 1250px){
    .nav-header li{
      padding: 0 14px;
    }
  } 
  .fother-user{
    float: right;
    height: 50px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    cursor: pointer;
  }
  .active-second-user{
    height: 25px;
    display: flex;
    align-items: center;
    padding: 2px 4px;
    /* border: 2px solid red; */
    color: #faad14;
  }
  .activeItem{
    background-color: rgb(236, 244, 254);
    color: rgb(101, 165, 249);
  }
</style>

